<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>借还统计</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" th:href="@{/static/layui/css/layui.css}">

    <script src="/static/js/jquery-1.11.3.min.js" th:src="@{/static/js/jquery-1.11.3.min.js}"></script>
    <script src="/static/layui/layui.all.js" th:src="@{/static/layui/layui.all.js}"></script>
    <script src="/static/js/util.js" th:src="@{/static/js/util.js}"></script>
    <!-- 引入 echarts.js -->
    <script src="/static/js/echarts.min.js" th:src="@{/static/js/echarts.min.js}"></script>
</head>

<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;height:400px;">

</div>

<!--ctx-->
<script th:replace="~{fragment::ctx}"/>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var chart = document.getElementById('main');
    var echart = echarts.init(chart);

    $(function(){
        buildData();
    });

    //生成数据
    function buildData()
    {


        echart.showLoading();
        // 请求
        $.ajax({
            url: ctx+'api/book/list?page=1&limit=100',
            type: 'GET',
            contentType: "application/json",
            dataType: "json",
            data: "",
            success: function (result) {

                if (result.code ==0) {
                    console.log(JSON.stringify(result.data.locationCode));
                    var data=result.data;
                    console.log(data);
                    //处理数据
                    chartData=[
                        {
                            name:'一号架',
                            value:0
                        },
                        {
                            name:'二号架',
                            value:0
                        },
                        {
                            name:'三号架',
                            value:0
                        },
                        {
                            name:'四号架',
                            value:0
                        }
                        ,
                        {
                            name:'五号架',
                            value:0
                        }
                    ]

                    for(var i=0,len=data.length;i<len;i++){
                        if(data[i].locationCode=='一号架'){
                            chartData[0].value++;
                        }
                        else if(data[i].locationCode=='二号架'){
                            chartData[1].value++;
                        }
                        else if(data[i].locationCode=='三号架'){
                            chartData[2].value++;
                        }
                        else if(data[i].locationCode=='四号架'){
                            chartData[3].value++;
                        }
                        else if(data[i].locationCode=='五号架'){
                            chartData[4].value++;
                        }
                        else{
                            chartData[5].value++;
                        }
                    }
                    echart.hideLoading();
                    buildChart(chartData);
                } else {
                    layer.alert(result.message);
                }
            }
        });

        /*for(var i=0;i<columLabel.length;i++)
        {
            for(var j=0;j<columName.length;j++)
            {
                arrData.push(Math.floor(Math.random()*1000+1000*j-1000*i));
            }
            console.info(arrData);
            columnValue.push(eval('(' + ("{'name':'"+columLabel[i]+"','type':'bar','data':["+arrData+"]}") + ')'));
        }*/


    }

    //生成图形
    function buildChart(chartData)
    {

        var option = {
            title: {
                text: '书架使用情况',
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['一号架','二号架','三号架','四号架','五号架']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} '
                },
                axisPointer: {
                    snap: true
                }
            },
            visualMap: {
                show: false,
                dimension: 0,
                pieces: [{
                    lte: 6,
                    color: 'green'
                }, {
                    gt: 6,
                    lte: 8,
                    color: 'red'
                }, {
                    gt: 8,
                    lte: 14,
                    color: 'green'
                }, {
                    gt: 14,
                    lte: 17,
                    color: 'red'
                }, {
                    gt: 17,
                    color: 'green'
                }]
            },
            series: [
                {
                    name: '书本',
                    type: 'line',
                    smooth: true,
                    data: chartData,
                    areaStyle: {},
                    markArea: {
                        itemStyle: {
                            color: 'rgba(255, 173, 177, 0.4)'
                        },
                        data: [ [{
                            name: '使用最多',
                            xAxis: '一号架'
                        }], [{
                            name: '使用最少',
                            xAxis: '四号架'
                        }] ]
                    }
                }
            ]
        };

        echart.setOption(option);
    }


</script>


</body>

</html>